<template>
	<div class="im-message-item">
		<div class="item_info">
			<span>{{ item.userName }}</span>
			<span>{{ item.timeStr }}</span>
		</div>
		<div class="item_content">
			<div class="item_content_item text" v-html="messageHtml"></div>
		</div>
	</div>
</template>

<script setup>
import { computed, toRefs } from 'vue'
import { emojiMap, emojiUrl } from '@/utils/emojiMap'
const props = defineProps({
	item: {
		type: Object,
		default: () => ({})
	}
})

const messageHtml = computed(() => {
	const { item } = toRefs(props)

	let newHtml = item.value.payload
	let prefixIndex = newHtml.indexOf('[');
	let suffixIndex = newHtml.indexOf(']');
	let htmlSub = newHtml.substring(prefixIndex, suffixIndex + 1)
	while (prefixIndex >-1 && suffixIndex > -1 && Object.keys(emojiMap).includes(htmlSub)) {
		newHtml = newHtml.replace(htmlSub, `<img src="${emojiUrl}${emojiMap[htmlSub]}" style="width: 20px; height:20px; vertical-align: text-bottom;" />`);
		prefixIndex = newHtml.indexOf('[');
		suffixIndex = newHtml.indexOf(']');
		htmlSub = newHtml.substring(prefixIndex, suffixIndex + 1)
	}
	return newHtml
})
</script>

<style scoped lang="less">
	.im-message-item {
		.item_info {
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			color: #8a9099;
			>span + span { margin-left: 10px; }
		}
		.item_content {
			width: 300px;
			&_item {
				border-radius: 4px;
				padding: 8px 12px;
				background-color: rgba(223,223,223,0.05);
				&.text {
					font-size: 14px;
					color: #fff;
					word-break: break-all;
				}
			}
		}
	}
</style>
